import React, { Component } from 'react';
import { Text, Image, View, TouchableOpacity, ScrollView } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_member_info_Certification, api_order_workorder_workorderDetail } from '../constants/HttpServices';
import { SubmitButton1 } from '../components/Button';
import { MyInput1 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import { ExamineView } from '../components/EmptyView';
import { HideItem, TextItem, ComponentItem, QuoteItem } from '../components/Item';
import CommonUtil from '../constants/CommonUtil';
import FastImage from 'react-native-fast-image';

export default class DemandDetailScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.id = navigation.getParam('id', 0);
        this.showOfferList = navigation.getParam('showOfferList', 0);//0代表不显示报价入口,1显示报价入口
        this.showOffer = navigation.getParam('showOffer', 0);//0代表不显示报价入口,1显示报价入口
        this.type = navigation.getParam('type', 0);//是否服务商 0=否，1=是

        this.state = {
            showBase: true,
            showList: true,
            showInfo: true,
            showOffer: true,

            data: {},

            money: '0',
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.getData();
        })
    }

    componentWillUnmount() {

    };

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                <MyHeader title='需求详情' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View>
                        <HideItem title='基本信息' isShow={this.state.showBase} isLast={false} onPress={() => { this.setState({ showBase: !this.state.showBase }) }} />
                        {this.state.showBase ?
                            <View style={{}}>
                                <TextItem title='询价标题：' value={this.state.data.title} isLast={false} />
                                <TextItem title='询价类目：' value={this.state.data.one_cate ? this.state.data.one_cate : '' +
                                    '   ' +
                                    this.state.data.two_cate ? this.state.data.two_cate : '' +
                                        '   ' +
                                        this.state.data.three_cate ? this.state.data.three_cate : ''} isLast={false} />
                                <TextItem title='总预算(含税)：' value={this.state.data.general_budget} isLast={false} />
                                <TextItem title='截止日期：' value={this.state.data.end_date} isLast={false} />
                                <TextItem title='交货日期：' value={this.state.data.delivery_date} isLast={false} />
                                <TextItem title='联系电话：' value={this.state.data.mobile} isLast={false} />
                                <TextItem title='收货地址：' value={this.state.data.address} isLast={false} />
                            </View> : null}
                        <HideItem style={{ marginTop: 5 * unitWidth }} title='零部件清单' isShow={this.state.showList} isLast={false} onPress={() => { this.setState({ showList: !this.state.showList }) }} />
                        {this.state.showList ?
                            <View style={{}}>
                                {this.getElementlView()}
                                <View style={{ height: 40 * unitWidth, backgroundColor: Colors.white, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', paddingHorizontal: 20 * unitWidth }}>
                                    <Text style={{ fontSize: 15, color: Colors.colorOrange }}>合计：<Text style={{ fontSize: 20 }}>￥{this.state.data.general_budget}</Text></Text>
                                </View>
                            </View> : null}
                        <HideItem style={{ marginTop: 5 * unitWidth }} title='补充信息' isShow={this.state.showInfo} isLast={false} onPress={() => { this.setState({ showInfo: !this.state.showInfo }) }} />
                        {this.state.showInfo ?
                            <View style={{}}>
                                <TextItem title='支付方式：' value={CommonUtil.getPayType(this.state.data.pay_type)} isLast={false} />
                                <TextItem title='送货免费供应商：' value={CommonUtil.getOtherType(this.state.data.other)} isLast={false} />
                                {this.state.data.remark ?
                                    <TextItem value={'补充说明：' + this.state.data.remark} isLast={false} />
                                    : null}
                                {this.state.data.file && this.state.data.file.length > 0 ?
                                    <View style={{
                                        width: width, paddingLeft: 20 * unitWidth,
                                        backgroundColor: Colors.white, alignItems: 'flex-start', paddingTop: 15 * unitWidth
                                    }}>
                                        <Text style={{ color: Colors.black, fontSize: 15 }}>附件</Text>
                                        <View style={{
                                            alignSelf: 'stretch',
                                            alignItems: 'center',
                                            flexDirection: 'row',
                                            flexWrap: 'wrap',
                                            marginVertical: 15 * unitWidth
                                        }}>
                                            {this.getFileImageView()}
                                        </View>
                                    </View> : null}
                            </View> : null}
                        <HideItem style={{ marginTop: 5 * unitWidth }} title={'已报价(' + this.state.data.quoted_price_count + '家)'} isShow={this.state.showOffer} isLast={false} onPress={() => { this.setState({ showOffer: !this.state.showOffer }) }} />
                        {this.state.showOffer && this.showOfferList == 1 ?
                            <View style={{}}>
                                {this.getQuoteList()}
                            </View> : null}
                        {/* <View style={{
                            width: width, minHeight: 40 * unitWidth,
                            paddingHorizontal: 20 * unitWidth, backgroundColor: Colors.white, alignItems: 'flex-start', paddingVertical: 10 * unitWidth
                        }}>
                            <Text style={{ color: Colors.black, fontSize: 15 }}>失败原因：</Text>
                            <Text style={{ color: Colors.black, fontSize: 14, marginTop: 5 * unitWidth }}>XXXXXXXXXXXXXXX</Text>
                        </View> */}
                        {this.showOffer == 1 ?
                            <SubmitButton1 style={{ alignSelf: 'center', marginVertical: 20 * unitWidth }} text='我要报价' onPress={() => {
                                this.props.navigation.navigate('Quote', { id: this.id })
                            }} /> : null
                        }
                    </View>
                </ScrollView>
            </View>
        );
    }

    getQuoteList() {
        let views = []
        if (this.state.data.merchant && this.state.data.merchant.length > 0) {
            for (let i = 0, len = this.state.data.merchant.length; i < len; i++) {
                let item = this.state.data.merchant[i];
                views.push(
                    this.getStatusTextView(item, i)
                );
            }
        }
        return views
    }

    getStatusTextView(item, i) {
        if (item.status == 1) {
            return (
                <QuoteItem valueStyle={{ color: Colors.colorGreen }}
                    count={i + 1} title={item.name} value={'中标   ' + '￥' + item.total_price} isLast={false} id={item.id} type={1} />
            )
        } else if (item.status == 2) {
            return (
                <QuoteItem valueStyle={{ color: Colors.color99 }}
                    count={i + 1} title={item.name} value={'未中标   ' + '￥' + item.total_price} isLast={false} id={item.id} type={1} />
            )
        } else if (item.status == 0) {
            return (
                <QuoteItem valueStyle={{ color: Colors.color99 }}
                    count={i + 1} title={item.name} value={'￥' + item.total_price} isLast={false} id={item.id} type={this.type} />
            )
        }
    }

    getFileImageView() {
        let views = []
        if (this.state.data.file && this.state.data.file.length > 0) {
            for (let i = 0, len = this.state.data.file.length; i < len; i++) {
                let item = this.state.data.file[i];
                views.push(
                    <TouchableOpacity key={i} style={{ width: 105 * unitWidth, height: 72 * unitWidth, marginTop: 10 * unitWidth, marginRight: 10 * unitWidth }}
                        onPress={() => {
                            this.props.navigation.navigate('BigImageList', { imageList: this.state.data.file })
                        }} activeOpacity={0.7}>
                        <FastImage
                            style={{ width: 105 * unitWidth, height: 72 * unitWidth }}
                            source={{ uri: item }} resizeMode={FastImage.resizeMode.cover} />
                    </TouchableOpacity>
                );
            }
        }
        return views
    }

    getElementlView() {
        let views = []
        if (this.state.data.element) {
            for (let i = 0, len = this.state.data.element.length; i < len; i++) {
                let item = this.state.data.element[i];
                views.push(
                    <ComponentItem count={i + 1} value1={item.name} value2={item.count} value3={item.money} isLast={false} ImageList={item.img} des={item.remark} />
                )
            }
        }
        return views;
    }

    getData() {
        let params = {
            'id': this.id,
            'type': this.type
        }
        postFetch(api_order_workorder_workorderDetail, params, {
            success: (response) => {
                let temp = 0;
                for (let i = 0, len = response.result.element.length; i < len; i++) {
                    let item = response.result.element[i];
                    temp += parseInt(item.money)
                }
                this.setState({
                    data: response.result,
                    money: temp
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}